<!--
 * @Author: 黄龙 
 * @pageName: '新版侧边框' 
 * @Date: 2018-01-25 15:02:21 
 * @Last Modified by:   黄龙 
 * @Last Modified time: 2018-01-25 15:02:21 
 -->
<template>
  <transition name="slide-fade">
    <div :style="{width:width}" v-show="show" class="aside aside-right">
      <div class="aside-dialog">
        <div class="aside-content">
          <div class="aside-header">
            <a @click='close'>&times;</a>
            <span class="aside-title">
              <i :class="Icon"></i> {{header}}
            </span>
          </div>
          <div class="aside-body">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    props: {
      show: {
        type: Boolean,
        require: true,
      },
      header: {
        type: String
      },
      width: {
        type: String,
        default: '850px'
      },
      Icon: {
        type: String,
        default: 'social-buffer'
      }
    },
    computed: {},
    watch: {},
    methods: {
      close() {
        this.$emit('update:show', false)
      }
    }
  }
</script>
<style scoped>
  .aside {
    position: fixed;
    top: 34px;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-left: 1px solid #e6e6e6;
    -webkit-box-shadow: -3px 0 4px rgba(0, 0, 0, 0.1);
    -o-box-shadow: -3px 0 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -3px 0 4px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: -3px 0 4px rgba(0, 0, 0, 0.1);
    box-shadow: -3px 0 4px rgba(0, 0, 0, 0.1);
  }

  .aside-dialog {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .aside-right {
    left: auto;
    right: 0;
  }

  .aside-header {
    font-size: 15px;
    height: 51px;
    line-height: 51px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
  }

  .aside-header span {
    font-weight: bold;
    color: #454545;
    float: left;
    margin-left: 20px;
    line-height: 51px;
  }

  .aside-header a {
    float: right;
    line-height: 51px;
    font-size: 28px;
    padding: 0 20px;
    color: #454545;
    cursor: pointer;
    border-left: 1px solid #e6e6e6;
  }

  .aside-header a:hover {
    background-color: #f9f9f9;
  }

  /* .aside-body {
    padding: 10px;
  } */
/* 可以设置不同的进入和离开动画   */
/* 设置持续时间和动画函数        */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
  .slideright-enter-active {
    animation: slideright-in .28s;
  }

  .slideright-leave-active {
    animation: slideright-out .28s;
  }

  @keyframes slideright-in {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }

    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideright-out {
    0% {
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }
</style>
<style>
  .footerBtn {
    width: 850px;
    position: fixed;
    bottom: 0;
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #144, 147, 153;
    background-color: #fff;
    z-index: 1113;
    box-shadow: 2px -2px 6px 0 rgba(144, 147, 153, 0.2);
    padding-left:20px;
  }

  .table-btn-header {
    border: 1px solid #d7dde4;
    border-bottom: none;
  }
</style>